<template>
    <view class="c-content">
        <view class="close-box" @click="close">
            <image src="../../static/images/close-01.png"></image>
        </view>
        <view class="c-info">
            <view class="client-img">
                <!-- <image :src="customer_info && customer_info.avatar ? customer_info.avatar : goodsImg" mode="scaleToFill"></image> -->
                <image
                    :src="avatar ? avatar : userDefault"
                    mode="scaleToFill"
                ></image>
            </view>
        </view>
        <view
            class="comm-list"
            :style="{ height: `calc(100vh - ${boxHeight}px)` }"
        >
            <view class="i-info">
                <view class="i-name" v-if="isShowName && name">{{ name }}</view>
                <view class="b-shopname" v-if="isShowCp && company">{{
                    company
                }}</view>
                <view class="b-phone" v-if="cellphone">{{ cellphone }}</view>
            </view>
            <view class="i-a-info">
                <view>
                    <text class="i-title">邮箱地址：</text>
                    <text>{{ email }}</text>
                </view>
            </view>

            <view class="i-b-info">
                <view>
                    <text class="i-title">供应商类别：</text>
                    <text>{{ typeid_name }}</text>
                </view>
                <view>
                    <text class="i-title">默认报价：</text>
                    <text>{{ price_i_name }}</text>
                </view>
            </view>

            <view class="i-b-info" v-if="false">
                <view>
                    <text class="i-title">开放云店：</text>
                    <text>{{ ydListTitle }}</text>
                </view>
                <!-- <view> 
					<text class="i-title">开放APP：</text>
					<text>{{"已开放"}}</text>
				</view> -->
            </view>

            <view class="i-b-info">
                <view>
                    <text class="i-title">经手人：</text>
                    <text>{{ uid_cp }}</text>
                </view>
                <view>
                    <text class="i-title">供应商备注：</text>
                    <text class="note">{{ remark }}</text>
                </view>
            </view>
            <view class="i-b-info" v-if="false">
                <view>
                    <text class="i-title">来源：</text>
                    <text>{{ from_name }}</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import staticConst from "../../js/const/StaticConst.js";
export default {
    props: [
        "isShowCp",
        "isShowName",
        "avatar",
        "name",
        "company",
        "cellphone",
        "email",
        "typeid_name",
        "price_i_name",
        "ydListTitle",
        "uid_cp",
        "remark",
        "from_name",
    ],
    data() {
        return {
            userDefault: staticConst.DEFAULT_IMG,
            boxHeight: 240,
        };
    },
    methods: {
        close() {
            this.$emit("closeSuppinfo", false);
        },
    },
};
</script>

<style lang="scss">
.c-content {
    width: 310px;
    height: 100%;
    position: relative;
    background: #f9f9f9;
    padding: 0 0px;
    box-sizing: border-box;
    .close-box {
        width: 15px;
        height: 15px;
        position: absolute;
        top: 20px;
        right: 20px;
        cursor: pointer;
        image {
            width: 100%;
            height: 100%;
        }
    }

    .c-info {
        width: 100%;
        height: 220px;
        align-items: center;
        justify-content: center;
        display: flex;
        text-align: center;
        padding-top: 20px;
        .client-img {
            width: 160px;
            height: 160px;
            border-radius: 50%;
            overflow: hidden;
            image {
                width: 100%;
                height: 100%;
            }
        }
    }
    .i-info {
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
        border-bottom: 1px solid #ececec;
        font-size: 16px;
        .i-name {
            text-align: center;
            font-size: 26px;
            font-weight: bold;
            color: #333;
        }
        .b-shopname,
        .b-phone {
            text-align: center;
            color: #999;
        }
    }

    .i-a-info,
    .i-b-info,
    .i-m-info {
        // text-align: center;
        padding: 10px;
        border-bottom: 1px solid #ececec;
        font-size: 16px;
        view {
            padding-left: 10px;
            .i-title {
                color: #999;
                display: inline-block;
                width: 100px;
                text-align-last: justify;
                text-align: justify;
                text-justify: distribute-all-lines; // 这行必加，兼容ie浏览器
            }
            .note {
                color: #999;
                .more {
                    padding-left: 5px;
                    color: #3388ff;
                    font-size: 13px;
                }
            }
            text {
                color: #333;
            }
            .stock {
                color: #3388ff;
            }
        }
    }
}
</style>
